<template>
    <el-dialog v-model="props.visible" title="编辑生产订单" width="35%" @close="handleClose">
        <el-form :model="form" ref="formRef" label-width="auto">
            <el-row :gutter="50">
                <!-- 左边 -->
                <el-col :span="12">
                    <el-form-item label="客户名称" prop="customerId" label-position="right">
                        <el-select v-model="selectedCustomer" clearable value-key="id" placeholder="请选择">
                            <el-option v-for="item in customerList" :key="item.id" :label="item.customerName" :value="item"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="产品名称" prop="bomId" label-position="right">
                        <el-select v-model="selectedBom" filterable clearable remote value-key="id" :remote-method="handleSearching" :loading="bomListLoading" placeholder="请选择">
                            <el-option v-for="item in bomList" :key="item.id" :label="item.bomName" :value="item"></el-option>
                        </el-select>
                        <span>库存数量：{{ selectedBom? selectedBom.inventoryNumber : '' }}</span>
                    </el-form-item>
                    <el-form-item label="产品数量" prop="produceNumber" label-position="right">
                        <el-input type="number" v-model="form.produceNumber" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="发货设置" prop="deliverySetting" label-position="right">
                        <el-select v-model="form.deliverySetting" placeholder="请选择">
                            <el-option v-for="item in props.settings" :key="item.value" :label="item.label" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 右边 -->
                <el-col :span="12">
                    <el-form-item label="交货日期" prop="deliveryDate" label-position="right">
                        <el-date-picker v-model="form.deliveryDate" placeholder="年/月/日" format="YYYY/MM/DD" value-format="YYYY-MM-DD"></el-date-picker>
                    </el-form-item>
                    <el-image :src="selectedBom.rederingsUrl" fit="cover"></el-image>
                </el-col>
            </el-row>
            <el-form-item label="备注" prop="remark" label-position="right">
                <el-input style="margin-top:5px" type="textarea" v-model="form.remark" maxlength="125" show-word-limit></el-input>
            </el-form-item>
            
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button  type="primary" @click="handleSubmit" >确 定</el-button>
                <el-button @click="handleClose">取 消</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ProductOrderFormType,ProductOrderVO } from '@/api/sj/productManagement/productOrder/types';
import { type FormInstance } from 'element-plus';
import { getCustomerApi } from '@/api/sj/customer-crm';
import { getBomByCustomerNameApi,editProductOrderApi } from '@/api/sj/productManagement/productOrder';


const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps<{
    visible:Boolean,
    initForm: ProductOrderFormType
    settings: any[],
    data: ProductOrderVO | undefined
}>();
const emits = defineEmits(['submit','close']);
const formRef = ref<FormInstance>();
const form = ref<ProductOrderFormType>({...props.initForm});
const customerList = ref<any[]>([]);
const selectedCustomer = ref<any>();
const bomList = ref<any[]>([]);
const bomListLoading = ref(false);
const selectedBom = ref<any>({});

watch(()=>props.visible,async (newValue)=>{
    if(newValue){
        const { rows } = await getCustomerApi({pageNum: 1, pageSize: 999});
        customerList.value = rows;
    };
},{deep: true});

watch(()=>props.data, (newData)=>{
    if(newData){
        const editFormData = {
            ...newData, 
            createTime: undefined,
            createByName: undefined,
            updateByName: undefined,
            imageUrl: undefined
        }
        form.value = {...editFormData};
        selectedCustomer.value = {
            id: newData.customerId,
            customerName: newData.customerName
        };
        selectedBom.value = {
            id: newData.bomId,
            bomName: newData.bomName,
            rederingsUrl: newData.imageUrl
        };
        bomList.value.push({
            id: newData.bomId,
            bomName: newData.bomName
        });
    };
},{deep: true});

/** 远程搜索 */
const handleSearching = async (query: string) => {
    if(query){
        bomListLoading.value = true;
        const { data } = await getBomByCustomerNameApi(query);
        bomList.value = data;
        bomListLoading.value = false;
    };
};

const handleSubmit = async () => {
    const { code } = await editProductOrderApi({...form.value});
    if(code == 200){
        emits('submit', true);
        proxy?.$modal.msgSuccess('新增成功');
        handleClose();
    }else{
        emits('submit', false);
    };
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};


</script>

<style lang="scss" scoped>
.el-select{
    width: 100%;
}
</style>